<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="cap.bean.User" %>
<%@ page import="cap.bean.Profile" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
    User user = (User)request.getSession().getAttribute("user");//用户资料
    Profile pf = (Profile)request.getAttribute("profile");//个人信息
    String succMsg = (String)request.getSession().getAttribute("succMsg");//更新个人资料成功
    String errorMsg = (String)request.getSession().getAttribute("errorMsg");//更新个人资料失败
    String succUpdateMsg = (String)request.getSession().getAttribute("succUpdateMsg");//密码更新消息提示
    String errorUpdateMsg = (String)request.getSession().getAttribute("errorUpdateMsg");//密码更新错误消息提示
    String validPwdMsg = (String)request.getSession().getAttribute("validPwdMsg");//旧密码验证失败消息提示
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>博客</title>
    <link href="<%=basePath%>bootstrap/css/blog-home.css"/>
    <link href="<%=basePath%>bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="<%=basePath%>bootstrap/js/jquery-2.1.1.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"><!--导航条、反色、固定在顶部 -->
    <div class="container"><!--将导航条居中对齐并在两侧添加内补 -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">博客</a><!--设置了内补（padding）和高度（height） -->
        </div>
        <!--导航链接，表格，和切换其他内容-->
        <div class="collapse navbar-collapse"><!--依赖collapse插件、视口足够窄.navbar-collapse内所包含的内容也将不可见-->
            <ul class="nav navbar-nav"><!--导航、导航项-->
                <li><a href="<%=path%>/user?method=index">网站首页</a></li>
            </ul>
            <c:if test="${null!=user&&user.getIsApplied() == 1}">
                <ul class="nav navbar-nav">
                    <li><a href="<%=basePath%>user?method=myblog&userId=${user.id}">我的博客</a></li>
                    <li><a href="<%=basePath%>article?method=manage&userId=${user.id}"><i class="glyphicon glyphicon-cog"></i> 博文管理</a></li><!--Glyphicons字体图标-->
                    <li class="divider"></li><!--分割线-->
                    <li><a href="<%=basePath%>category?method=manage&userId=${user.id}"><i class="glyphicon glyphicon-cog"></i> 分类管理</a></li><!--Glyphicons字体图标-->
                    <li class="divider"></li>
                    <li><a href="<%=basePath%>comment?method=manage&userId=${user.id}"><i class="glyphicon glyphicon-cog"></i> 评论管理</a></li>
                </ul>
            </c:if>
            <c:if test="${user==null}">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="<%=path%>/login.jsp" target="_self">登录</a></li>
                    <li><a href="<%=path%>/register.jsp" target="_self">注册</a></li>
                </ul>
            </c:if>
            <c:if test="${user!=null}">
                <div class="pull-right">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">欢迎，${user.userName}</a></li>
                        <li><a href="<%=basePath%>user?method=profile&id=${user.id}"><i class="glyphicon glyphicon-cog"></i> 编辑个人信息</a></li>
                        <c:if test="${user.isApplied==1}">
                            <li><a href="<%=basePath%>user?method=bloginfo&userId=${user.id}"><i class="glyphicon glyphicon-cog"></i> 编辑博客信息</a></li>
                        </c:if>
                        <li><a href="<%=path%>/user?method=logout"><i class="glyphicon glyphicon-off"></i> 登出</a></li>
                    </ul>
                    </li>
                    </ul>
                </div>
            </c:if>
        </div>
    </div>
</nav>
<% if (null != succMsg) { %>
<div class="container">
    <div class="alert alert-success">
        <%=succMsg %>
    </div>
</div>
<%  request.getSession().removeAttribute("succMsg");
} %>

<% if (null != errorMsg) { %>
<div class="container">
    <div class="alert alert-error">
        <%=errorMsg %>
    </div>
</div>
<%  request.getSession().removeAttribute("errorMsg");
} %>

<% if (null != succUpdateMsg) { %>
<div class="container">
    <div class="alert alert-success">
        <%=succUpdateMsg %>
    </div>
</div>
<%  request.getSession().removeAttribute("succUpdateMsg");
} %>

<% if (null != errorUpdateMsg) { %>
<div class="container">
    <div class="alert alert-error">
        <%=errorUpdateMsg %>
    </div>
</div>
<%  request.getSession().removeAttribute("errorUpdateMsg");
} %>

<% if (null != validPwdMsg) { %>
<div class="container">
    <div class="alert alert-error">
        <%=validPwdMsg %>
    </div>
</div>
<%  request.getSession().removeAttribute("validPwdMsg");
} %>

<div class="container" style="position: absolute;top: 80px;left: 360px">
    <div class="well row col-md-6"><!--警告框、中屏幕-->
        <ul class="nav nav-tabs" ><!--标签页-->
            <li id="li1"><a href="#home" data-toggle="tab">个人资料</a></li><!--激活状态、tab页-->
        </ul>
        <div class="" id="home"><!--tab容器、激活状态-->
            <form class="form-horizontal" name="profile_form" role="form" id="tab" action="<%=basePath %>user?method=updateprofile&id=<%=user.getId() %>" method="post" onsubmit="return isValidate(profile_form)">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" value="<%=user.getUserName() %>" id="username" class="form-control" name="username" disabled>
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="text" value="<%=user.getEmail() %>"  id="email" class="form-control" name="email" disabled>
                </div>
                <div class="form-group">
                    <label for="first_name">姓</label>
                    <% if (null != pf) { %>
                    <input class="form-control" type="text" value="<%=pf.getFirstName() %>" id="first_name" name="first_name">
                    <% } else { %>
                    <input class="form-control" type="text" value=""  name="first_name">
                    <% } %>
                </div>
                <div class="form-group">
                    <label for="last_name">名</label>
                    <% if (null != pf) { %>
                    <input class="form-control" type="text" value="<%=pf.getLastName() %>" id="last_name" name="last_name">
                    <% } else { %>
                    <input class="form-control" type="text" value=""  name="last_name">
                    <% } %>
                </div>
                <div class="form-group">
                    <label for="telephone">手机号码</label>
                    <% if (null != pf) { %>
                    <input class="form-control" type="text" value="<%=pf.getTelephone() %>" id="telephone" name="telephone">
                    <% } else { %>
                    <input class="form-control" type="text" value=""  name="telephone">
                    <% } %>
                </div>
                <div class="form-group">
                    <label for="gender">性别</label>
                    <select class="form-control" name="gender" id="gender">
                        <% if (null != pf) { %>
                        <% if (pf.getGender() == 0) { %>
                        <option value="male">男</option>
                        <option value="female" selected>女</option>
                        <% } else { %>
                        <option value="male" selected>男</option>
                        <option value="female">女</option>
                        <%     }
                        } else {
                        %>
                        <option value="male">男</option>
                        <option value="female">女</option>
                        <%
                            }
                        %>
                    </select>
                </div>
                <div class="form-group" >
                    <button class="btn btn-primary" type="submit">保存</button>
                </div>
            </form>
        </div>
        <li id="li2" style="list-style: none"><a href="#" data-toggle="tab">修改密码</a></li>
        <div class="" id="profile"><!--tab容器、隐藏状态-->
            <form class="form-horizontal" id="tab2" name="updatePwd" onsubmit="return isPasswordValidate(updatePwd)"
                  method="post" action="user?method=updatepass&userId=<%=user.getId() %>">
                <div class="form-group">
                    <label for="old_pwd">旧密码</label>
                    <input class="form-control" type="password" name="old_pwd" id="old_pwd" >
                </div>
                <div class="form-group">
                    <label for="new_pwd" >新密码</label>
                    <input class="form-control" type="password" name="new_pwd" id="new_pwd">
                </div>
                <div class="form-group">
                    <label for="submit_new_pwd">新密码（确认）</label>
                    <input class="form-control" type="password" name="submit_new_pwd" id="submit_new_pwd">
                </div>
                <div class="form-group">
                    <button class="btn btn-primary">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="container" style="position: absolute;left: 320px;bottom: -350px">
    <hr>
    <footer style="text-align: center">
        <div class="row">
            <div class="col-lg-12">
                <p>
                    &middot;网站创建到目前访问人数：<%=(Integer)session.getAttribute("num") %>
                </p>
            </div>
        </div>
    </footer>
</div>
</div>
<div><audio autoplay="autoplay" loop="true"><source src="music/1.mp3"></audio></div>
</body>
<script>
    function isValidate(profile_form) {
        var first_name = profile_form.first_name.value;
        var last_name = profile_form.last_name.value;
        var telephone = profile_form.telephone.value;

        if (first_name == "" || last_name == "" || telephone == "") {
            alert("姓，名，手机号码为必填项");
            return false;
        }

        return true;
    }
    function isPasswordValidate(form) {
        var old_pwd = form.old_pwd.value;
        var new_pwd = form.new_pwd.value;
        var submit_new_pwd = form.submit_new_pwd.value;

        if (old_pwd == "" || new_pwd == "" || submit_new_pwd == "") {
            alert("新密码、旧密码、旧密码（确认）为必填项");
            return false;
        } else if (old_pwd == new_pwd) {
            alert("新密码和旧密码不能相同");
            return false;
        } else if (submit_new_pwd != new_pwd) {
            alert("新密码和新密码（确认）必须相同");
            return false;
        } else {
            return true;
        }
    }
    document.getElementById("li1").onclick=function(){
        var home=document.getElementById("home");
        var profile=document.getElementById("profile");
        var li2=document.getElementById("li2");
        var li1=document.getElementById("li1");
        li1.setAttribute("class","active");
        li2.removeAttribute("class");
    }
    document.getElementById("li2").onclick=function(){
        var home=document.getElementById("home");
        var profile=document.getElementById("profile");
        var li2=document.getElementById("li2");
        var li1=document.getElementById("li1");
        li2.setAttribute("class","active");
        li1.removeAttribute("class");
    }

</script>
</html>